
<template>
  <Card title="添加新闻">
    <Form :model="formItem" :label-width="80" style="width: 60vw">
      <FormItem label="标题" style="width:300px">
        <Input v-model="formItem.cuNewsTitle" placeholder="请输入新闻标题"></Input>
      </FormItem>
      <FormItem label="来源" style="width:300px">
        <Input v-model="formItem.cuNewsSource" placeholder="请输入文章来源"></Input>
      </FormItem>
      <FormItem label="分类" style="width:300px">
        <Select v-model="formItem.cuCategoryId" >
          <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </FormItem>

      <FormItem label="添加封面:" >
          <div class="demo-upload-list" v-if="hasImage">
            <img :src="imageUrl"  />
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="handleView(imageUrl)"></Icon>
              <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
            </div>
          </div>
          <Upload
            :action="actionUrl"
            :format="['jpg','jpeg','png']"
            :max-size="204800"
            :on-exceeded-size="handleMaxSize"
            :on-success="handleSuccess"
            :show-upload-list="false"
            style=" width:58px;">
            <Button icon="ios-cloud-upload-outline">上传图片</Button>
          </Upload>
      </FormItem>
      <FormItem label="文章内容">
        <editor :cache="false" ref="editor" :value="formItem.cuNewsContent" @on-change="handleChange"/>
      </FormItem>
      <FormItem >
        <Button type="primary" @click="save">保存</Button>
      </FormItem>
    </Form>
    <Modal title="图片预览" v-model="visible">
      <img :src="showImageUrl" v-if="visible" style="width: 100%" />
    </Modal>
  </Card>
</template>

<script>
import Editor from '_c/editor/editor'
export default {
  name: 'news-add',
  components: { Editor },
  data () {
    return {
      actionUrl: this.$all.baseUploadURL + '/me-minio/uploadImages',
      imageUrl: '',
      hasImage: false,
      showImageUrl: '',
      visible: false,
      formValidate: {
        productlogo: '',
        templatename: '',
        templatetype: '1',
        openrange: '1',
        labelUrl: ''

      },
      newsId: null,
      formItem: {
        cuNewsTitle: '',
        cuNewsSource: '',
        cuNewsContent: '',
        cuUserId: 1,
        cuCategoryId: 0,
        cuTownId: this.$store.state.user.userAll.cuOnlyId,
        cuNewsCover: ''
      },
      cityList: [
        {
          value: 1,
          label: '本县资讯'
        },
        {
          value: 2,
          label: '文件通告'
        },
        {
          value: 3,
          label: '新闻资讯'
        }
      ]
    }
  },
  methods: {
    handleSuccess (res, file) {
      this.imageUrl = res
      this.hasImage = true
      this.formItem.cuNewsCover = res
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '图片大小限制',
        desc: '文件 ' + file.name + '太大,不能超过 2M.'
      })
    },
    handleRemove () {
      this.imageUrl = ''
      this.hasImage = false
    },
    handleView (imageUrl) {
      this.showImageUrl = imageUrl
      this.visible = true
    },
    save () {
      let url = 'saveOne'
      if (this.newsId) {
        url = 'updateOne'
      }
      this.$axios_supermall.post('/NewsController/' + url, this.formItem).then(resp => {
        if (resp.data.code == 0) {
          this.$Message.success('处理成功')
          setTimeout(() => {
            this.$router.push({ path: '/news/news_list' })
          }, 1000)
        } else if (resp.data.code == 101) {
          this.$Message.error(resp.data.msg)
        }
      })
    },
    handleChange (html, text) {
      this.formItem.cuNewsContent = html
    },
    changeContent () {
      this.$refs.editor.setHtml('<p>powered by wangeditor</p>')
    },
    queryOne () {
      this.$axios_supermall.post('/NewsController/queryOne', this.newsId).then(resp => {
        if (resp.data.code == 0) {
          this.formItem = resp.data.data
          this.imageUrl = this.formItem.cuNewsCover
          this.hasImage = true
        }
        this.$refs.editor.setHtml(this.formItem.cuNewsContent)
      })
    }
  },
  mounted () {
    this.newsId = this.$route.params.id
    if (this.$route.params.id) {
      this.queryOne()
    }
    this.formItem.cuNewsContent = ''
  }
}
</script>

<style scoped>
.demo-upload-list {
  display: inline-block;width: 500px;height: 300px;text-align: center;line-height: 60px;
  border: 1px solid transparent;border-radius: 4px;overflow: hidden;background: #fff;
  position: relative;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;height: 100%;
}
.demo-upload-list-cover {
  display: none;position: absolute;top: 0;bottom: 0;
  left: 0;right: 0;background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;font-size: 20px;cursor: pointer;margin: 0 2px;
}
</style>
